import { Component, ErrorInfo, ReactNode } from 'react'
import { Result, Button } from 'antd'

interface Props {
  children: ReactNode
}

interface State {
  hasError: boolean
  error?: Error
  errorInfo?: ErrorInfo
}

/**
 * 错误边界组件
 * 用于捕获子组件中的JavaScript错误，记录错误并显示降级UI
 */
class ErrorBoundary extends Component<Props, State> {
  constructor(props: Props) {
    super(props)
    this.state = { hasError: false }
  }

  /**
   * 当子组件抛出错误时调用
   * @param error 错误对象
   * @returns 更新后的state
   */
  static getDerivedStateFromError(error: Error): State {
    // 更新state以显示降级UI
    return { hasError: true, error }
  }

  /**
   * 当子组件抛出错误时调用，用于记录错误信息
   * @param error 错误对象
   * @param errorInfo 错误信息
   */
  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
    // 记录错误信息
    if (process.env.NODE_ENV === 'development') {
      console.error('ErrorBoundary caught an error:', error, errorInfo)
    }
    
    // 更新state以包含错误信息
    this.setState({
      error,
      errorInfo
    })
    
    // 这里可以将错误信息发送到错误报告服务
    // 例如：logErrorToService(error, errorInfo)
  }

  /**
   * 重置错误状态，重新渲染子组件
   */
  handleReset = () => {
    this.setState({ hasError: false, error: undefined, errorInfo: undefined })
  }

  /**
   * 刷新页面
   */
  handleRefresh = () => {
    window.location.reload()
  }

  render() {
    if (this.state.hasError) {
      // 显示错误降级UI
      return (
        <div style={{ 
          padding: '50px',
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
          minHeight: '50vh'
        }}>
          <Result
            status="error"
            title="页面出现错误"
            subTitle="抱歉，页面遇到了一些问题。您可以尝试重新加载页面或返回上一页。"
            extra={[
              <Button type="primary" key="refresh" onClick={this.handleRefresh}>
                刷新页面
              </Button>,
              <Button key="reset" onClick={this.handleReset}>
                重试
              </Button>,
            ]}
          >
            {/* 开发环境下显示详细错误信息 */}
            {process.env.NODE_ENV === 'development' && this.state.error && (
              <div style={{ 
                marginTop: 20, 
                padding: 16, 
                backgroundColor: '#f5f5f5', 
                borderRadius: 4,
                textAlign: 'left'
              }}>
                <h4>错误详情（仅开发环境显示）：</h4>
                <pre style={{ 
                  fontSize: 12, 
                  color: '#d32f2f',
                  whiteSpace: 'pre-wrap',
                  wordBreak: 'break-word'
                }}>
                  {this.state.error.toString()}
                  {this.state.errorInfo?.componentStack}
                </pre>
              </div>
            )}
          </Result>
        </div>
      )
    }

    // 没有错误时正常渲染子组件
    return this.props.children
  }
}

export default ErrorBoundary